<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
    background-color:lightgreen;
}

.quality {height: auto;padding-top: 30px;box-sizing: border-box;text-align: center;line-height: 1.2;}
.ulzidong {/* display: flex;justify-content: space-between; */max-width: 1200px;width:100%;display: inline-block;margin: 0 auto;}
.ulzidong li {/* width:348px; */width:22%;height:auto;overflow: hidden;float:left;margin:15px 10px;}
.ulzidong li img {/* width:348px; */width:100%;height:470px;}

@media only screen and (max-width: 1024px) {
    body {
        background-color:lightblue;
    }
	.ulzidong li {/* width:348px; */width:45%;height:auto;overflow: hidden;float:left;margin:15px 10px;}
	.ulzidong li img {/* width:348px; */width:100%;height:470px;}
}
@media only screen and (max-width: 750px) {
    body {
        background-color:red;
    }
	.ulzidong li {/* width:348px; */width:90%;height:auto;overflow: hidden;float:left;margin:15px 10px;}
	.ulzidong li img {/* width:348px; */width:100%;height:470px;}	
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。</p>
<ul class="ulzidong">
<li class="lizidong">
	<img class="zidongimg" src="./skin/picture/i_01_1.jpg" />
</li>
<li class="zidong">
	<img class="zidongimg" src="./skin/picture/i_01_1.jpg" />
</li>
<li class="zidong">
	<img class="zidongimg" src="./skin/picture/i_01_1.jpg" />
</li>
<li class="zidong">
	<img class="zidongimg" src="./skin/picture/i_01_1.jpg" />
</li>
</ul>
</body>
</html>
